<template>
	<div class="order">
		<cl-crud ref="crud" @load="onLoad">
			<template #slot-datepicker>
				<div class="_top-filter">
					<el-date-picker
						v-model="datas"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						size="mini"
						value-format="yyyy-MM-dd"
						end-placeholder="结束日期"
						@change="dateChange"
					></el-date-picker>
					<div
						class="filter-btn"
						:class="[index == filterArrActive ? 'filter-btn-active' : '']"
						@click="filterArrActive = index"
						v-for="(item, index) in filterArr"
						:key="index"
					>
						{{ item }}
					</div>

					<div>
						<select-staff
							class="selects"
							ref="selectstaff"
							v-model="selects.staffId"
							@change="val => refresh({ staffId: val, page: 1 })"
						></select-staff>
					</div>

					<!-- <el-button
						@click="Export"
						v-permission="'crm:order:positionExport'"
						type="primary"
						style="margin-left:10px"
						size="mini"
						><i class="el-icon-download"></i>导出报表</el-button
					>-->
				</div>
			</template>
			<template #table-column-fansNum="{scope}">
				<div>
					<div>微信个数：{{ scope.row.wechatNum }}</div>
					<div>总粉丝数：{{ scope.row.fansNum }}</div>
					<div>
						新增人数：
						<span style="color:red;font-size:16px">
							{{ scope.row.newFansNum }}
						</span>
					</div>
				</div>
			</template>

			<template #table-column-fansNum="{scope}">
				<div>
					<div>
						<span style="color:red;font-size:16px">
							{{ scope.row.newFansNum || '0' }}
						</span>
						/{{ scope.row.fansNum }}
					</div>
				</div>
			</template>
			<template #table-column-aTypeNum="{scope}">
				<div>
					<div>
						<span style="color:red;font-size:16px">{{ scope.row.newATypeNum }}</span>
						/{{ scope.row.aTypeNum }}
					</div>
				</div>
			</template>
			<template #table-column-fissionNum="{scope}">
				<div>
					<div>
						<span style="color:red;font-size:16px">{{ scope.row.newFissionNum }}</span>
						/{{ scope.row.fissionNum }}
					</div>
				</div>
			</template>
			<template #table-column-transform="{scope}">
				<div>{{ Number(scope.row.transform * 100).toFixed(2) }}%</div>
			</template>
			<template #table-column-validCommission="{scope}">
				<div>{{ scope.row.validCommission.toFixed(2) }}</div>
			</template>
			<template #table-column-averageProduct="{scope}">
				<div>{{ scope.row.averageProduct.toFixed(2) }}</div>
			</template>
		</cl-crud>
	</div>
</template>
<script>
import moment from 'moment';
import { dateFormat } from '@/utils/index';
import SelectStaff from '@/components/order/select-staff';

import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			filterArr: ['今日', '昨日', '最近7天', '最近30天', '本月'],
			filterArrActive: 0,
			crud: null,
			selects: {
				staffId: ''
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			params: {
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime,
				...dateFormat(0)
			},
			subData: {}
		};
	},
	components: {
		SelectStaff
	},
	watch: {
		filterArrActive(val) {
			this.refresh({
				page: 1,
				size: 10,
				...dateFormat(val)
			});
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		let start = moment()
			.hour(0)
			.minute(0)
			.second(0)
			.format('YYYY-MM-DD');

		let end = moment().format('YYYY-MM-DD');
		this.datas = [start, end];
	},
	methods: {
		dateFormat,
		onLoad({ ctx, app }) {
			this.crud = app;
			const { permission } = this.$store.state.menu;
			const { delete: del } = this.$service.reproing.staffdaily.permission;
			ctx.permission({
				add: false,
				delete: permission.includes(del),
				update: false
			});
			ctx.service(this.$service.reproing.staffdaily)
				.set('dict', {
					api: {
						list: 'list', // 全部数据
						add: 'add', // 新增
						update: 'update', // 修改
						delete: 'delete', // 删除
						info: 'info', // 详情
						page: 'staffStatistics'
					},
					label: {
						add: '添加日1报'
					},
					search: {
						query: 'salesStatus'
					}
				})
				.set('table', {
					props: {
						'show-summary': true,
						'summary-method': this.getSummaries
					},
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 80
						},
						{
							label: '员工名称',
							prop: 'username',
							align: 'center',
							minWidth: 100
						},
						// {
						// 	label: '时间',
						// 	prop: 'time',
						// 	align: 'center',
						// 	minWidth: 150
						// },
						{
							label: '微信个数',
							prop: 'wechatNum',
							align: 'center',
							emptyText: '0',
							minWidth: 100
						},
						{
							label: '粉丝新增/粉丝总数',
							prop: 'fansNum',
							align: 'center',
							minWidth: 130
						},
						{
							label: 'A类新增/A类总数',
							prop: 'aTypeNum',
							align: 'center',
							minWidth: 130
						},
						{
							label: '当天转化率(%)',
							prop: 'transform',
							align: 'center',
							minWidth: 120
						},
						{
							label: '裂变新增/裂变总数',
							prop: 'fissionNum',
							align: 'center',
							emptyText: '0',
							minWidth: 150
						},
						{
							label: '有效订单数',
							prop: 'validOrderNum',
							align: 'center',
							emptyText: '0',
							minWidth: 100
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							emptyText: '0',
							minWidth: 100
						},
						{
							label: '人均单产',
							prop: 'averageProduct',
							align: 'center',
							emptyText: '0',
							minWidth: 100
						}
					],
					op: {
						visible: false
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入员工名称'
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('submit', (open, data, { next, done }) => {
					console.log(open);
					console.log(data);
					next();
					done();
				})
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					this.subData = subData;
				})
				.done();
			app.refresh(this.params);
		},
		// 日报导出
		// Export() {
		// 	console.log('导出');
		// 	this.$service.reproing.staffdaily
		// 		.export(this.params)
		// 		.then(res => {
		// 			download({
		// 				data: res,
		// 				fileName: `员工统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
		// 			});
		// 		})
		// 		.catch(err => console.err(err));
		// },
		dateChange(val) {
			if (!val) {
				this.refresh({ startTime: '', endTime: '', page: 1 });
				return;
			}
			if (moment(new Date()).isBefore(val[1], 'day')) {
				let end = moment().format('YYYY-MM-DD');
				this.datas = [val[0], end];
				this.refresh({ startTime: val[0], endTime: end, page: 1 });
				return;
			}
			this.refresh({ startTime: val[0], endTime: val[1], page: 1 });
		},
		refresh(params) {
			if (params.startTime && params.endTime) {
				this.datas = [params.startTime, params.endTime];
			}
			this.params = {
				...this.params,
				...params
			};
			this.crud.refresh(params);
		},
		//总计
		getSummaries() {
			// const { columns, data } = param;
			// const sums = [];
			// columns.forEach((column, index) => {
			// 	if (index === 0) {
			// 		sums[index] = '总计';
			// 		return;
			// 	}
			// 	let labelInclude = ['裂变新增/裂变总数', 'A类新增/A类总数', '粉丝新增/粉丝总数'];
			// 	if (labelInclude.includes(column.label)) {
			// 		const values = data.map(item => Number(item[column.property]));
			// 		const values2 = data.map(item =>
			// 			Number(
			// 				item[
			// 					'new' +
			// 						column.property.substr(0, 1).toUpperCase() +
			// 						column.property.substr(1)
			// 				]
			// 			)
			// 		);
			// 		sums[index] = this.calcValue(values2) + '/' + this.calcValue(values);
			// 		return;
			// 	} else {
			// 		if (column.property == 'transform') {
			// 			const values = data.map(item => Number(item[column.property]));
			// 			let num = this.calcValue(values);
			// 			sums[index] = num;
			// 			return;
			// 		}
			// 		if (column.label == '操作') {
			// 			sums[index] = '';
			// 			return;
			// 		}
			// 		const values = data.map(item => Number(item[column.property]));
			// 		sums[index] = this.calcValue(values);
			// 	}
			// });
			const {
				wechatNum,
				newFansNum,
				fansNum,
				newATypeNum,
				aTypeNum,
				transform,
				newFissionNum,
				fissionNum,
				validOrderNum,
				validCommission,
				averageProduct
			} = this.subData;
			return [
				'',
				'总计',
				wechatNum,
				newFansNum + '/' + fansNum,
				newATypeNum + '/' + aTypeNum,
				Number(transform * 100).toFixed(2) + '%',
				newFissionNum + '/' + fissionNum,
				validOrderNum,
				Number(validCommission).toFixed(2),
				Number(averageProduct).toFixed(2)
			];
		}
		// calcValue(values) {
		// 	if (!values.every(value => isNaN(value))) {
		// 		let num = values.reduce((prev, curr) => {
		// 			const value = Number(curr);
		// 			if (!isNaN(value)) {
		// 				return prev + curr;
		// 			} else {
		// 				return prev;
		// 			}
		// 		}, 0);
		// 		return num.toFixed(2);
		// 	} else {
		// 		return '';
		// 	}
		// },
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
    padding 10px
}
.order {
    height 100%
}
._top-filter .el-date-editor {
    border-left 1px solid #DCDFE6
}

.el-range-editor.is-active {
    border-color #FF4400
}
.filter-btn {
	width:83px;
	height: 28px;
	text-align center
	line-height: 28px;
	background:rgba(255,255,255,1);
	border:1px solid rgba(0,0,0,0.14901960784313725);
	font-size 14px
	color #606266
	margin-left 10px
	border-radius:4px;
	cursor: pointer;
	transition all .3s
}
.filter-btn-active {
	background:#FD5822
	color #ffffff
	border:1px solid #ffffff;
}
/deep/.el-table__footer {
	.has-gutter {
		.el-table_1_column_4, .el-table_1_column_5, .el-table_1_column_7 {
			color: red !important;
			div {
				font-size: 18px !important;
			}
		}
	}
}
</style>
